<template>
	<view class="xbd-msg"  @click="clickCheck()">
		<view class="left">
			<image class="left_img" src="../../static/images/msg/msgPhoto.png" mode=""></image>
		</view>
		<view class="right">
			<view class="msg">
				 {{msgInfo.text}}
				 <text :class="['text', msgInfo.is_read ? 'active':'']" >点此查看</text>
				 <uni-icons class="text" type="arrowright" size="14" :color="msgInfo.is_read ? '#999999' : '#5473E8'"></uni-icons>
			</view>
			<view class="date">
				{{msgInfo.time | timeFormat('YYYY-MM-DD HH:mm')}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"XbdAnnouncement",
		props: {
			msgInfo: Object,
			index: Number
		},
		data() {
			return {
			}
		},
		methods:{
			clickCheck(){
				uni.$emit('isRead', this.index);
				uni.navigateTo({
					url:'/' + this.msgInfo.jump,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
		
	.xbd-msg{
		display: flex;
		width: 750rpx;
		box-sizing: border-box;
		padding: 0 50rpx;
		font-size: 28rpx;
		margin-top: 10px;
		.left_img{
			width: 70rpx;
			height: 70rpx;
			margin-top: 15px;
		}
		.right{
			flex: 1;
			margin-left: 40rpx;
			.text{
				color: #5473E8 ;
				margin-left: 10rpx;
				&.active{
					color: #999999 !important;
				}
			}
			.msg{
				background-color: #F8F8F8;
				border-radius: 8rpx;
				padding: 13px 30rpx;
				text-align: justify;
				word-break: break-all;
			}
				
			.date{
				font-size: 24rpx;
				text-align: right;
				color: #999999;
				margin-top: 10px;
			}
		}
	}
</style>
